<template>
  <!--信函催收-->
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="信函模板一" name="lt-first">
      <p style="height:100px"></p>
      <letter-temp-one ref="letter-one"></letter-temp-one>
      <el-button type="primary" :style="{width:printButtonWidth}" @click="printTempOne">打印</el-button>
    </el-tab-pane>
    <el-tab-pane label="信函模板二" name="lt-second">
      <p></p>
      <letter-temp-two ref="temp-two"></letter-temp-two>
      <el-button type="primary" :style="{width:printButtonWidth}" @click="printTempTwo">打印</el-button>
    </el-tab-pane>
    <el-tab-pane label="信函模板三" name="lt-third">
      <p style="height:60px"></p>
      <letter-temp-three ref="letter-three"></letter-temp-three>
      <el-button type="primary" :style="{width:printButtonWidth}" @click="printTempThree">打印</el-button>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import LetterTempOne from '@/views/smart-acc/LetterTempOne'
  import LetterTempTwo from '@/views/smart-acc/LetterTempTwo'
  import LetterTempThree from '@/views/smart-acc/LetterTempThree'
  import { getBrowserType } from '@/util/common'
  export default {
    name: 'letter-temp',
    data() {
      return {
        activeName: 'lt-first', // 默认所在tab页
        printButtonWidth: '100px' // 打印按钮的宽度
      }
    },
    methods: {
      /**
       * 打印信函催收模板1
       */
      printTempOne() {
        var newWindow = window.open('.')
        var docStr = this.$refs['letter-one'].$el.innerHTML
        newWindow.document.write(docStr)
        newWindow.print()
        newWindow.close()
      },
      /**
       * 打印信函催收模板2
       */
      printTempTwo() {
        console.log('printTempTwo')
        var nWindow = window.open('.')
        var content = this.$refs['temp-two'].$el.innerHTML
        nWindow.document.write(content)
        // console.log(nWindow.document)
        nWindow.print()
        nWindow.close()
      },
      /**
       * 打印信函催收模板3
       */
      printTempThree() {
        var newWindow = window.open('.')
        var docStr = this.$refs['letter-three'].$el.innerHTML
        newWindow.document.write(docStr)
        newWindow.document.close()
        newWindow.print()
        newWindow.close()
      },
      handleClick(tab, event) {}
    },
    /**
     * 当前组件激活时清空store中的数据
     */
    activated() {
      this.$store.commit('updatePrintInfo', [])
      this.$store.commit('printSomeSymbol', [])
      this.$refs['letter-one'].ltShowTemp()
      this.$refs['letter-three'].lt3ShowTemp()
      this.$refs['temp-two'].l2showTemp()
      var browserType = getBrowserType()
      if (browserType === 'chrome') {
        this.$store.commit('browserType', { printPageHeight: '1025px' })
      }
      if (browserType === 'opera') {
        this.$store.commit('browserType', { printPageHeight: '1025px' })
      }
      if (browserType === '360') {
        this.$store.commit('browserType', { printPageHeight: '1015px' })
      }
      if (browserType === 'firefox') {
        this.$store.commit('browserType', { printPageHeight: '1050px' })
      }
    },
    components: {
      LetterTempOne,
      LetterTempTwo,
      LetterTempThree
    }
  }

</script>
